<template>
  <div class="page-container">
    <div id="tableContainer" style="width: 600px; height: 400px"></div>
  </div>
</template>

<script>
import * as VTable from "@visactor/vtable";
export default {
  data() {
    return {};
  },
  methods: {
    init() {
      // 数据
      const records = [
        {
          230517143221027: "CA-2018-156720",
          230517143221030: "JM-15580",
          230517143221032: "Bagged Rubber Bands",
          230517143221023: "Office Supplies",
          230517143221034: "Fasteners",
          230517143221037: "West",
          230517143221024: "Loveland",
          230517143221029: "2018-12-30",
          230517143221042: "3",
          230517143221040: "3.024",
          230517143221041: "-0.605",
        },
        {
          230517143221027: "CA-2018-115427",
          230517143221030: "EB-13975",
          230517143221032: "GBC Binding covers",
          230517143221023: "Office Supplies",
          230517143221034: "Binders",
          230517143221037: "West",
          230517143221024: "Fairfield",
          230517143221029: "2018-12-30",
          230517143221042: "2",
          230517143221040: "20.72",
          230517143221041: "6.475",
        },
        {
          230517143221027: "CA-2018-115427",
          230517143221030: "EB-13975",
          230517143221032: "Cardinal Slant-D Ring Binder, Heavy Gauge Vinyl",
          230517143221023: "Office Supplies",
          230517143221034: "Binders",
          230517143221037: "West",
          230517143221024: "Fairfield",
          230517143221029: "2018-12-30",
          230517143221042: "2",
          230517143221040: "13.904",
          230517143221041: "4.519",
        },
        {
          230517143221027: "CA-2018-143259",
          230517143221030: "PO-18865",
          230517143221032: "Wilson Jones Legal Size Ring Binders",
          230517143221023: "Office Supplies",
          230517143221034: "Binders",
          230517143221037: "East",
          230517143221024: "New York City",
          230517143221029: "2018-12-30",
          230517143221042: "3",
          230517143221040: "52.776",
          230517143221041: "19.791",
        },
        {
          230517143221027: "CA-2018-143259",
          230517143221030: "PO-18865",
          230517143221032: "Gear Head AU3700S Headset",
          230517143221023: "Technology",
          230517143221034: "Phones",
          230517143221037: "East",
          230517143221024: "New York City",
          230517143221029: "2018-12-30",
          230517143221042: "7",
          230517143221040: "90.93",
          230517143221041: "2.728",
        },
        {
          230517143221027: "CA-2018-143259",
          230517143221030: "PO-18865",
          230517143221032:
            "Bush Westfield Collection Bookcases, Fully Assembled",
          230517143221023: "Furniture",
          230517143221034: "Bookcases",
          230517143221037: "East",
          230517143221024: "New York City",
          230517143221029: "2018-12-30",
          230517143221042: "4",
          230517143221040: "323.136",
          230517143221041: "12.118",
        },
        {
          230517143221027: "CA-2018-126221",
          230517143221030: "CC-12430",
          230517143221032:
            "Eureka The Boss Plus 12-Amp Hard Box Upright Vacuum, Red",
          230517143221023: "Office Supplies",
          230517143221034: "Appliances",
          230517143221037: "Central",
          230517143221024: "Columbus",
          230517143221029: "2018-12-30",
          230517143221042: "2",
          230517143221040: "209.3",
          230517143221041: "56.511",
        },
        {
          230517143221027: "US-2018-158526",
          230517143221030: "KH-16360",
          230517143221032: "Harbour Creations Steel Folding Chair",
          230517143221023: "Furniture",
          230517143221034: "Chairs",
          230517143221037: "South",
          230517143221024: "Louisville",
          230517143221029: "2018-12-29",
          230517143221042: "3",
          230517143221040: "258.75",
          230517143221041: "77.625",
        },
        {
          230517143221027: "US-2018-158526",
          230517143221030: "KH-16360",
          230517143221032: "Global Leather and Oak Executive Chair, Black",
          230517143221023: "Furniture",
          230517143221034: "Chairs",
          230517143221037: "South",
          230517143221024: "Louisville",
          230517143221029: "2018-12-29",
          230517143221042: "1",
          230517143221040: "300.98",
          230517143221041: "87.284",
        },
        {
          230517143221027: "US-2018-158526",
          230517143221030: "KH-16360",
          230517143221032:
            "Panasonic KP-350BK Electric Pencil Sharpener with Auto Stop",
          230517143221023: "Office Supplies",
          230517143221034: "Art",
          230517143221037: "South",
          230517143221024: "Louisville",
          230517143221029: "2018-12-29",
          230517143221042: "1",
          230517143221040: "34.58",
          230517143221041: "10.028",
        },
        {
          230517143221027: "US-2018-158526",
          230517143221030: "KH-16360",
          230517143221032: "GBC ProClick Spines for 32-Hole Punch",
          230517143221023: "Office Supplies",
          230517143221034: "Binders",
          230517143221037: "South",
          230517143221024: "Louisville",
          230517143221029: "2018-12-29",
          230517143221042: "1",
          230517143221040: "12.53",
          230517143221041: "5.889",
        },
        {
          230517143221027: "US-2018-158526",
          230517143221030: "KH-16360",
          230517143221032:
            "DMI Arturo Collection Mission-style Design Wood Chair",
          230517143221023: "Furniture",
          230517143221034: "Chairs",
          230517143221037: "South",
          230517143221024: "Louisville",
          230517143221029: "2018-12-29",
          230517143221042: "8",
          230517143221040: "1207.84",
          230517143221041: "314.038",
        },
        {
          230517143221027: "CA-2018-130631",
          230517143221030: "BS-11755",
          230517143221032: "Hand-Finished Solid Wood Document Frame",
          230517143221023: "Furniture",
          230517143221034: "Furnishings",
          230517143221037: "West",
          230517143221024: "Edmonds",
          230517143221029: "2018-12-29",
          230517143221042: "2",
          230517143221040: "68.46",
          230517143221041: "20.538",
        },
        {
          230517143221027: "CA-2018-130631",
          230517143221030: "BS-11755",
          230517143221032: "Acco Glide Clips",
          230517143221023: "Office Supplies",
          230517143221034: "Fasteners",
          230517143221037: "West",
          230517143221024: "Edmonds",
          230517143221029: "2018-12-29",
          230517143221042: "5",
          230517143221040: "19.6",
          230517143221041: "9.604",
        },
        {
          230517143221027: "CA-2018-146626",
          230517143221030: "BP-11185",
          230517143221032: "Nu-Dell Executive Frame",
          230517143221023: "Furniture",
          230517143221034: "Furnishings",
          230517143221037: "West",
          230517143221024: "Anaheim",
          230517143221029: "2018-12-29",
          230517143221042: "8",
          230517143221040: "101.12",
          230517143221041: "37.414",
        },
        {
          230517143221027: "CA-2018-158673",
          230517143221030: "KB-16600",
          230517143221032: "Xerox 1915",
          230517143221023: "Office Supplies",
          230517143221034: "Paper",
          230517143221037: "Central",
          230517143221024: "Grand Rapids",
          230517143221029: "2018-12-29",
          230517143221042: "2",
          230517143221040: "209.7",
          230517143221041: "100.656",
        },
        {
          230517143221027: "US-2018-102638",
          230517143221030: "MC-17845",
          230517143221032: "Ideal Clamps",
          230517143221023: "Office Supplies",
          230517143221034: "Fasteners",
          230517143221037: "East",
          230517143221024: "New York City",
          230517143221029: "2018-12-29",
          230517143221042: "3",
          230517143221040: "6.03",
          230517143221041: "2.955",
        },
        {
          230517143221027: "CA-2018-118885",
          230517143221030: "JG-15160",
          230517143221032: "Adtran 1202752G1",
          230517143221023: "Technology",
          230517143221034: "Phones",
          230517143221037: "West",
          230517143221024: "Los Angeles",
          230517143221029: "2018-12-29",
          230517143221042: "3",
          230517143221040: "302.376",
          230517143221041: "22.678",
        },
        {
          230517143221027: "CA-2018-118885",
          230517143221030: "JG-15160",
          230517143221032: "Global High-Back Leather Tilter, Burgundy",
          230517143221023: "Furniture",
          230517143221034: "Chairs",
          230517143221037: "West",
          230517143221024: "Los Angeles",
          230517143221029: "2018-12-29",
          230517143221042: "4",
          230517143221040: "393.568",
          230517143221041: "-44.276",
        },
      ];

      // 列表头
      const columns = [
        {
          field: "230517143221027",
          title: "Order ID",
          width: "auto",
        },
        {
          field: "230517143221030",
          title: "Customer ID",
          width: "auto",
        },
        {
          field: "230517143221032",
          title: "Product Name",
          width: "auto",
        },
        {
          field: "230517143221023",
          title: "Category",
          width: "auto",
        },
        {
          field: "230517143221034",
          title: "Sub-Category",
          width: "auto",
        },
        {
          field: "230517143221037",
          title: "Region",
          width: "auto",
        },
        {
          field: "230517143221024",
          title: "City",
          width: "auto",
        },
        {
          field: "230517143221029",
          title: "Order Date",
          width: "auto",
        },
        {
          field: "230517143221042",
          title: "Quantity",
          width: "auto",
        },
        {
          field: "230517143221040",
          title: "Sales",
          width: "auto",
        },
        {
          field: "230517143221041",
          title: "Profit",
          width: "auto",
        },
      ];

      const option = {
        records, //表格的数据，以数组形式表示。
        columns, // 表格列的配置，每一列需要分别设置配置项，包括列类型、宽度、标题等。支持的列类型有：'text'、'link'、'image'、'video'、'sparkline'、'progressbar'、'chart'。每种列类型的配置项略有差别，请根据所需类型灵活添加特有配置
        widthMode: "standard", // widthMode：表格列宽度的计算模式。
        // transpose: true, // 是否转置表格，默认为 false。
        showHeader: true, // 是否显示表头，默认为 true。
        // pagination: //分页配置，包括总记录数、每页记录数、当前页码等。
        // sortState：排序状态，用于指定排序依据字段和排序规则。
        // theme：表格主题，可以是内置主题或自定义主题。

        frozenColCount: 1, // 左侧冻结 1
        // rightFrozenColCount: 1, // 右侧冻结 1
        // bottomFrozenRowCount: 1, // 底部冻结 1

        // defaultRowHeight: 50, // 默认行高
        // defaultHeaderRowHeight: [30, 40], //  以下代码示例展示了如何设置一级表头行高为 30，二级表头行高为 40：
        // defaultColWidth: 100, // 默认列宽
        // defaultHeaderColWidth: [50, 60], // 如何设置一级行表头列宽为 50，二级行表头列宽为 60：
      };

      // 创建 VTable 实例
      const tableInstance = new VTable.ListTable(
        document.getElementById("tableContainer"),
        option
      );
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style lang="scss" scoped>
.page-container {
  width: 100%;
  height: 100%;
  border: 1px solid red;
  #container {
    width: 800px;
    height: 600px;
  }
}
</style>
